<template>
  <div ref="bod" class="formDesign">
    <FlowHeader :submit="submitDat" @routHandle="routHandle" />
    <div ref="content" class="formDesign-content">
      <div :class="{procedureTemplate: true, topShow:topShow}">
        <div class="title">
          <span> 控件库 </span>
        </div>
        <div class="items-wrap">
          <div v-for="(item, index) in itemsDataes" :key="index" :ref="`it`+index" class="items" @mousedown="mouseDown(item)">
            <div>{{ item.lab }}</div>
            <div class="icon" :class="[item.icon]" />
          </div>
          <div v-show="isdrag" class="drag" :style="{left:left,top:top}">
            <div>{{ dragData.lab }}</div>
            <div class="icon" :class="[dragData.icon]" />
          </div>
        </div>
      </div>
      <div ref="phCont" class="phoneContent">
        <div ref="phScroll" class="phoneShow">
          <template v-if="phDataes.length">
            <div v-for="(it, index) in phDataes" :key="index" @mousedown="phMouseDown(it, index)" @click.stop="openSet(index)">
              <div v-if="it !== 'empty'" :class="{phItem:true, mov: actId === index, act: actInd === index && !isdrag, over:actId !== index}">
                <span class="close" @click.stop="delNode(index)">X</span>
                <div>{{ it.data.title || it.lab }}</div>
                <div class="icon" :class="[it.icon]" />
              </div>
              <div v-if="it === 'empty'" class="phEmpty" />
            </div>
          </template>
          <div v-if="phDataes.length <= 0" class="phItem-empty">
            <div><img src="@/assets/empty.png" width="90%" alt=""></div>
            <div>选择左侧控件拖动到此处</div>
          </div>
        </div>
      </div>
      <div :class="{setParamsBox: true, setShow:setShow}">
        <div v-show="type == 'input'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'textArea'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'number'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">单位：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'radio'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
            <div v-for="(item, ind) in attributeset.data.titlab" :key="ind" class="labTitBox">
              <input type="text" style="width: 220px" :value="item" placeholder="请输入选项名" @input="event => labTitChang(event, ind)">
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
              <span class="add" @click="labTitChang('add', ind)"> + </span>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'checkbox'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
            <div v-for="(item, ind) in attributeset.data.titlab" :key="ind" class="labTitBox">
              <input type="text" style="width: 220px" :value="item" placeholder="请输入选项名" @input="event => labTitChang(event, ind)">
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
              <span class="add" @click="labTitChang('add', ind)"> + </span>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'date'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">日期类型：</div>
            <div>
              <el-radio v-model="attributeset.data.dataType" label="1">年-月-日 时:分</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">年-月-日</el-radio>
            </div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'img'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
            <div class="lab">水印照片：</div>
            <div><el-checkbox v-model="attributeset.data.watermark">开启后图片上传只能通过手机拍照方式</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'money'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">提示文字：</div>
            <div><input v-model="attributeset.data.placeholder" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
            <div class="lab">大写：</div>
            <div><el-checkbox v-model="attributeset.data.capitalization">显示大写(输入后自动显示大写)</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'explain'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div><input v-model="attributeset.data.title" type="hidden" placeholder="请输入"></div>
            <div class="lab">说明文字：<span>最多5000字</span></div>
            <div><el-input v-model="attributeset.data.explain" type="textarea" placeholder="请输入" /></div>
            <div class="lab">可以输入链接跳转地址：</div>
            <div><el-input v-model="attributeset.data.explainUrl" type="textarea" placeholder="请输入" /></div>
            <div class="lab">显示：</div>
            <div><el-checkbox v-model="attributeset.data.isShow">不在审批页显示</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'file'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
          </div>
        </div>
        <div v-show="type === 'contacts'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填</el-checkbox> </div>
            <div class="lab">选项：</div>
            <div>
              <el-radio v-model="attributeset.data.dataType" label="1">只能选择一人</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">可同时选择多人</el-radio>
            </div>
          </div>
        </div>
        <div v-show="type === 'department'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div class="lab">标题：</div>
            <div><input v-model="attributeset.data.title" type="text" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
            <div class="lab">选项：</div>
            <div style="line-height: 30px;">
              <el-radio v-model="attributeset.data.dataType" label="1">只能选择一个部门</el-radio>
              <el-radio v-model="attributeset.data.dataType" label="2">可同时选择多个部门</el-radio>
            </div>
          </div>
        </div>
        <div v-show="type === 'location'" class="content">
          <div class="title">
            {{ attributeset.lab }}
          </div>
          <div v-if="attributeset.data" class="list">
            <div><input v-model="attributeset.data.title" type="hidden" placeholder="请输入"></div>
            <div class="lab">验证：</div>
            <div><el-checkbox v-model="attributeset.data.isMust">必填（勾选后可作为流程条件）</el-checkbox> </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FlowHeader from '@/components/FlowHeader'
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  components: {
    FlowHeader
  },
  data() {
    return {
      topShow: true,
      setShow: false,
      setTit: '属性设置',
      itemData: '',
      type: 'input',
      isdrag: false,
      left: 0,
      top: 0,
      mouseX: 0,
      mouseY: 0,
      fixedTop: 68, // 顶部固定高
      fixedX: 0, // 鼠标起始值 X
      fixedY: 0, // 鼠标起始值 X
      movInd: '', // 被点击框的位置
      movToInd: 0, // 移动到位置的index
      phx1: 0, // 手机位置
      phx2: 0,
      phy1: 0,
      phy2: 0,
      actId: '', // 当前选择项位置
      fixedId: '', // 起始点位置
      actInd: '', // 被点击项
      oldMove: 0, // 上次位移
      movSt: true,
      dragData: {}, // 被移动框的数据
      attributeset: {},
      phDataes: [],
      itemsDataes: [
        { type: 'input', lab: '单行输入框', icon: 'icondanhangshuru', data: { title: '单行输入框', placeholder: '', isMust: false }},
        { type: 'textArea', lab: '多行输入框', icon: 'iconduohangshuru', data: { title: '多行输入框', placeholder: '', isMust: false }},
        { type: 'number', lab: '数字输入框', icon: 'iconshuzishuru', data: { title: '数字输入框', condit: '', value: '' }},
        { type: 'radio', lab: '单选框', icon: 'icondanxuan', data: { title: '单选框', titlab: ['选项1'], radio: [] }},
        { type: 'checkbox', lab: '多选框', icon: 'iconduoxuan', data: { title: '多选框', titlab: ['选项1'] }},
        { type: 'date', lab: '日期', icon: 'iconriqi', data: { title: '日期' }},
        // {type: 'dataArea',lab: '日期区间', icon: 'iconriqiqujian', data:{title: ''}},
        { type: 'img', lab: '图片', icon: 'icontupian', data: { title: '图片' }},
        { type: 'money', lab: '金额', icon: 'iconjine', data: { title: '金额', condit: '', value: '' }},
        { type: 'explain', lab: '说明文字', icon: 'iconshuomingwenzi', data: { title: '说明文字' }},
        { type: 'file', lab: '附件', icon: 'iconfujian', data: { title: '附件' }},
        { type: 'contacts', lab: '联系人', icon: 'iconlianxiren', data: { title: '联系人' }},
        { type: 'department', lab: '部门', icon: 'iconbumen', data: { title: '部门', inDepartment: [] }},
        { type: 'location', lab: '地点', icon: 'icondidian', data: { title: '地点' }}
      ]
    }
  },
  computed: {
    ...mapGetters([
      'flowId',
      'tableData',
      'baseData',
      'flowData'
    ])
  },
  watch: {},
  mounted() {
    this.init()
    this.phCont()
  },
  methods: {
    async init() {
      if (this.flowId) {
        await this.$store.dispatch('approval/getFlowInfoAct', { id: this.flowId }).then((res) => {
          this.$store.dispatch('approval/setflowdata', { ...res })
          this.$store.dispatch('approval/setflowid', '')
          const phDataes = []
          res.tableData.forEach(n => {
            n.data === '' ? phDataes.push({ ...n, data: {}}) : phDataes.push({ ...n, data: JSON.parse(n.data) })
          })
          this.phDataes = phDataes
          this.loading = false
        }).catch(() => {
          this.$message.error('数据请求失败！请稍后重试')
          this.loading = false
        })
      } else {
        if (this.tableData.length > 0) {
          const phDataes = []
          this.tableData.forEach(n => {
            n.data === '' ? phDataes.push({ ...n, data: {}}) : phDataes.push({ ...n, data: JSON.parse(n.data) })
          })
          this.phDataes = phDataes
        }
      }
    },
    routHandle(url) {
      this.phDataes.forEach(n => {
        if (n.fieldKey === '') {
          this.$store.dispatch('approval/getFileKeyAct').then(res => {
            n.fieldKey = res
          })
        }
      })
      console.log(this.phDataes)
      this.$store.dispatch('approval/setflowdata', { tableData: this.phDataes })
      this.$router.push(url)
    },
    mouseUp() {
      this.isdrag = false
      this.movSt = false
      this.actId = ''
      if (this.phDataes.indexOf('empty') !== -1) {
        this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
        this.phDataes.splice(this.movToInd, 0, this.dragData)
        if (this.movInd !== 'add') {
          this.phDataes.splice(this.movInd < this.movToInd ? this.movInd : this.movInd + 1, 1)
          this.actInd = this.movInd < this.movToInd ? this.movToInd - 1 : this.movToInd
        }
      }

      this.$refs.content.onmousemove = ''
    },
    mouseMove(e) {
      const x = e.clientX
      const y = e.clientY
      this.top = (y - this.mouseY - this.fixedTop) + 'px'
      this.left = (x - this.mouseX) + 'px'
      this.movSt = true
      this.moveCheck(x, y)
      this.$refs.bod.onmouseup = this.mouseUp
    },
    mouseDown(item) {
      this.dragData = item
      this.dragDataHandle()
      this.isdrag = true
      const x = event.clientX
      const y = event.clientY
      const lx = event.layerX
      const ly = event.layerY
      this.movInd = 'add'
      this.mouseX = lx
      this.mouseY = ly
      this.top = (y - ly - this.fixedTop) + 'px'
      this.left = (x - lx) + 'px'
      this.$refs.content.onmousemove = this.mouseMove
    },
    phMouseDown(item, i) {
      this.phCont()
      this.type = item.type
      this.fixedX = event.clientX
      this.fixedY = event.clientY
      this.movInd = i
      this.attributeset = item
      this.setTit = item.lab
      this.movSt = true
      this.dragData = item
      this.$refs.content.onmousemove = this.phmouseMove
    },
    phmouseMove(e) {
      const x = event.clientX
      const y = event.clientY
      this.top = (y - 16 - this.fixedTop) + 'px'
      this.left = (x - 74) + 'px'
      this.moveCheck(x, y)
      this.$refs.bod.onmouseup = this.mouseUp
    },
    // 移动处理
    moveCheck(x, y) {
      if (x < this.phx1 || x > this.phx2) {
        if (this.phDataes.indexOf('empty') !== -1) {
          this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
          this.movSt = true
        }
        return false
      }
      if (this.fixedY === 0 || Math.abs(y - this.fixedY) > 2) {
        const st = 158
        const scNode = this.$refs.phScroll
        const num = (y + scNode.scrollTop - 158) / 48
        const end = this.phDataes.length * 48 < 560 ? this.phDataes.length * 48 + 158 : 560 + 158

        if (y < st) {
          this.fixedId = 0
          this.movToInd = 0
          scNode.scrollTop = 0
        } else if (y > end) {
          this.movToInd = this.phDataes.length - 1
          this.fixedId = this.movToInd
          scNode.scrollTop = this.phDataes.length * 48 - 500
        } else {
          this.movToInd = Math.round(num)
          this.fixedId = this.fixedY ? Math.round((this.fixedY - 138) / 48) : ''
        }
        this.isdrag = true
        if (this.movSt && this.phDataes.indexOf('empty') === -1) {
          this.oldMove = this.movToInd
          this.phDataes.splice(this.movToInd, 0, 'empty')
          this.movSt = false
        } else {
          this.phDataes.splice(this.phDataes.indexOf('empty'), 1)
          this.phDataes.splice(this.movToInd, 0, 'empty')
          this.oldMove = this.movToInd
        }
        if (this.fixedY && this.phDataes.indexOf('empty') !== -1) {
          this.actId = this.fixedId > this.movToInd ? this.movInd + 1 : this.movInd
        }
      }
    },
    delNode(ind) {
      if (this.actInd === ind) {
        this.actInd = ''
        this.setShow = false
      } else if (ind < this.actInd) {
        this.actInd = this.actInd - 1
      }
      this.phDataes.splice(ind, 1)
    },
    openSet(i) {
      this.actInd = i
      this.setShow = true
    },
    // 记录手机位置
    phCont() {
      const stX = this.$refs.phCont.offsetLeft - 296 / 2
      this.phx1 = stX
      this.phx2 = stX + 296
      this.phy1 = 0
      this.phy2 = document.body.offsetHeight - 68
    },
    // 移动数据处理
    dragDataHandle(item) {
      this.$store.dispatch('approval/getFileKeyAct').then(res => {
        this.dragData.fieldKey = res
      })
    },
    // fieldKey获取
    async getFileKey() {
      await this.$store.dispatch('approval/getFileKeyAct').then(res => {
        this.itemData = res
      })
    },
    //
    labTitChang(st, ind) {
      if (typeof st === 'string' && st === 'add') {
        this.attributeset.data.titlab.push(`选项${this.attributeset.data.titlab.length + 1}`)
      } else if (typeof st === 'string' && st === 'sub') {
        this.attributeset.data.titlab.splice(ind, 1)
      } else {
        this.attributeset.data.titlab[ind] = st.target.value
      }
    },
    // 数据保存
    async submitDat() {
      await this.$store.dispatch('approval/setflowdata', { tableData: this.phDataes })
      await this.$store.dispatch('approval/setflowst', 'memory')
      const tableData = []
      this.phDataes.forEach(n => {
        tableData.push({ ...n, title: n.data.title, data: JSON.stringify(n.data) })
      })
      const pramas = { baseData: this.baseData, tableData, flowData: this.flowData }
      await this.$store.dispatch('approval/addFlowInfoAct', { ...pramas })
      this.$message.success('数据修改成功！')
    }
  }
}
</script>

<style lang="scss">
  body {
    background-color: #f5f5f7 !important;
  }

  .formDesign {
    min-width: 1000px;
    height: calc(100vh - 70px);

    &-title {
      position: relative;
      z-index: 99999;
      top: 0px;
      left: 0px;
      width: 100%;
      color: #fff;
      background: #38adff;
      height: 68px;

      .topBox {
        display: flex;
        text-align: center;
        width: 500px;
        margin: 0 auto;
        padding: 25px 0;
      }

      .label {
        flex: 1;
        cursor: pointer;

        span {
          display: inline-block;
          width: 16px;
          height: 16px;
          line-height: 16px;
          font-size: 12px;
          border-radius: 100%;
          border: solid 1px #fff;
          margin-right: 4px;
        }
      }
    }

    &-content {
      *::selection {
        background: none;
      }

      position: relative;
      width: 100%;
      height: calc(100vh - 68px);
      overflow: hidden;
      top: 68px;

      .procedureTemplate {
        position: absolute;
        z-index: 99;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);
        background: #fff;
        left: -360px;
        width: 360px;
        height: 100%;

        .title {
          margin: 17px 0;
          font-size: 14px;
          color: #666;
          padding: 0 15px;
          width: 100%;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
        }

        .items-wrap {
          display: flex;
          flex-wrap: wrap;
          padding-left: 12px;

          .items {
            position: relative;
            font-size: 12px;
            width: 162px;
            line-height: 1.5;
            color: #666;
            cursor: move;
            margin: 6px 12px 8px 0px;
            padding: 6px 10px;
            border-radius: 2px;
            border: 1px solid #e3e4e4;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .drag {
            position: absolute;
            background: #fff;
            font-size: 12px;
            width: 162px;
            line-height: 1.5;
            color: #666;
            cursor: all-scroll;
            margin: 0px;
            padding: 6px 10px;
            border-radius: 2px;
            border: 1px solid #e3e4e4;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }

      .topShow {
        transition: 200ms;
        left: 0;
      }

      .setParamsBox {
        position: absolute;
        top: 0px;
        box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, .1);
        background: #fff;
        right: -325px;
        width: 325px;
        height: 100%;
        font-size: 14px;

        input:focus {
          outline: none;
        }

        .title {
          padding: 5px 15px;
          font-size: 16px;
          line-height: 30px;
          width: 100%;
        }

        .list {
          padding: 10px 15px;

          input {
            width: 100%;
            border: solid 1px #ccc;
            border-radius: 3px;
            line-height: 25px;
            padding: 0 10px;
            font-size: 14px;
            color: #666;
          }

          .lab {
            height: 15px;
            margin: 10px 0;
          }
          .labTitBox{
            margin-bottom: 10px;
            span{
              display: inline-block;
              width: 20px;
              height: 20px;
              margin: 0 5px;
              text-align: center;
              line-height: 16px;
              font-size: 20px;
              border-radius: 20px;
              color: #fff;
              cursor: pointer;
            }
            .sub{
              background: #c8c9d5;
            }
            .add{
              background: #3345ff;
            }
          }
        }
      }

      .setShow {
        transition: 200ms;
        right: 0;
      }

      .phoneContent {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 322px;
        height: 648px;
        background: url("./../../assets/phone.png") top center no-repeat;
        background-size: 100% 100%;
        z-index: 9;

        .phoneShow {
          overflow-y: scroll;
          position: absolute;
          transition: 200ms;
          top: 90px;
          left: 50%;
          transform: translateX(-50%);
          width: 276px;
          padding: 0 10px;
          padding-bottom: 20px;
          height: 520px;

          .phItem {
            background: #fff;
            position: relative;
            margin: 10px 0;
            width: 100%;
            padding: 10px;
            font-size: 14px;
            border-radius: 3px;
            cursor: move;
            display: flex;
            justify-content: space-between;
            border: dashed 1px #fff;
            color: #333;

            .close {
              display: none;
              background: #f00;
              color: #fff;
              text-align: center;
              width: 20px;
              height: 20px;
              font-size: 14px;
              line-height: 20px;
              border-radius: 50%;
              position: absolute;
              right: -10px;
              top: -10px;
              cursor: pointer;
            }

            &:hover .close {
              display: block;
            }
          }

          .over {
            &:hover {
              border: dashed 1px #f00;
            }
          }

          .mov:after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 3px;
            width: 256px;
            height: 38px;
            background: rgba(0, 0, 0, 0.3);
            border: dashed 2px rgba(0, 0, 0, 0.3);
          }

          .act {
            border: solid 1px #f00;

            &:hover {
              border-style: solid;
            }
          }

          .phEmpty {
            background: #f00;
            height: 4px;
            position: relative;
            margin: 10px 0;

            &:before, &:after {
              position: absolute;
              right: -4px;
              top: -4px;
              content: '';
              width: 0;
              height: 0;
              border-width: 6px;
              border-style: solid;
              border-color: transparent #f00 transparent transparent;
            }

            &:before {
              left: -4px;
              right: auto;
              border-color: transparent transparent transparent #f00;
            }
          }

          .phItem-empty {
            padding-top: 120px;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #999;
          }
        }
      }
    }
  }
</style>
